<template>
  <uni-popup ref="popup" type="bottom" :mask-click="true" :safe-area="false" style="z-index: 9999;">
    <view class="spec-popup">
      <view class="spec-header">
        <view class="spec-dish-info">
          <image :src="dish.image" class="spec-dish-image" mode="aspectFill"></image>
          <view class="spec-dish-details">
            <text class="spec-dish-name">{{ dish.name }}</text>
            <text class="spec-dish-price">¥{{ dish.price }}</text>
          </view>
        </view>
        <view class="spec-close" @click="close">
          <uni-icons type="close" size="24" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="spec-content">
        <!-- 规格选择 -->
        <view class="spec-section" v-if="specs.length > 0">
          <view class="spec-title">规格</view>
          <view class="spec-options">
            <view 
              v-for="(spec, index) in specs" 
              :key="'spec-' + index" 
              class="spec-option" 
              :class="{ active: selectedSpec === spec }"
              @tap="selectSpec(spec)"
            >
              {{ spec }}
            </view>
          </view>
        </view>
        
        <!-- 辣度选择 -->
        <view class="spec-section" v-if="spicyLevels.length > 0">
          <view class="spec-title">辣度</view>
          <view class="spec-options">
            <view 
              v-for="(level, index) in spicyLevels" 
              :key="'spicy-' + index" 
              class="spec-option" 
              :class="{ active: selectedSpicy === level }"
              @tap="selectSpicy(level)"
            >
              {{ level }}
            </view>
          </view>
        </view>
        
        <!-- 口味选择 -->
        <view class="spec-section" v-if="flavors.length > 0">
          <view class="spec-title">口味</view>
          <view class="spec-options">
            <view 
              v-for="(flavor, index) in flavors" 
              :key="'flavor-' + index" 
              class="spec-option" 
              :class="{ active: selectedFlavor === flavor }"
              @tap="selectFlavor(flavor)"
            >
              {{ flavor }}
            </view>
          </view>
        </view>
      </view>
      
      <view class="spec-footer">
        <view class="spec-quantity">
          <view class="quantity-control">
            <uni-icons type="minus-filled" size="24" color="#3db87f" @click="decreaseQuantity"></uni-icons>
            <text class="quantity-text">{{ quantity }}</text>
            <uni-icons type="plus-filled" size="24" color="#3db87f" @click="increaseQuantity"></uni-icons>
          </view>
        </view>
        <view class="spec-confirm" @tap="confirm">加入购物车</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

const props = defineProps({
  dish: {
    type: Object,
    required: true
  },
  specs: {
    type: Array,
    default: () => ['小份', '中份', '大份']
  },
  spicyLevels: {
    type: Array,
    default: () => ['不辣', '微辣', '中辣', '特辣']
  },
  flavors: {
    type: Array,
    default: () => ['原味', '微甜', '酸甜', '咸鲜']
  },
  initialQuantity: {
    type: Number,
    default: 1
  }
});

const emit = defineEmits(['confirm', 'close']);

const popup = ref<any>(null);
const quantity = ref(props.initialQuantity);
const selectedSpec = ref(props.specs[0] || '');
const selectedSpicy = ref(props.spicyLevels[0] || '');
const selectedFlavor = ref(props.flavors[0] || '');

// 监听initialQuantity的变化
watch(() => props.initialQuantity, (newVal) => {
  if (newVal > 0) {
    quantity.value = newVal;
  }
});

const open = () => {
  // 打开时设置初始数量
  if (props.initialQuantity > 0) {
    quantity.value = props.initialQuantity;
  } else {
    quantity.value = 1; // 默认值
  }
  popup.value.open();
};

const close = () => {
  popup.value.close();
  emit('close');
};

const selectSpec = (spec: unknown) => {
  selectedSpec.value = spec as string;
};

const selectSpicy = (level: unknown) => {
  selectedSpicy.value = level as string;
};

const selectFlavor = (flavor: unknown) => {
  selectedFlavor.value = flavor as string;
};

const increaseQuantity = () => {
  quantity.value++;
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const confirm = () => {
  emit('confirm', {
    dishId: props.dish.id,
    quantity: quantity.value,
    spec: selectedSpec.value,
    spicy: selectedSpicy.value,
    flavor: selectedFlavor.value
  });
  close();
};

// 暴露方法给父组件
defineExpose({
  open,
  close
});
</script>

<style lang="scss">
/* 规格选择弹出层样式 */
.spec-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10001;
}

.spec-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}

.spec-dish-info {
  display: flex;
  align-items: center;
}

.spec-dish-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.spec-dish-details {
  display: flex;
  flex-direction: column;
}

.spec-dish-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.spec-dish-price {
  font-size: 32rpx;
  color: #3db87f;
  font-weight: 500;
}

.spec-close {
  padding: 10rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spec-content {
  flex: 1;
  padding: 0 30rpx;
  overflow-y: auto;
  max-height: 70vh;
}

.spec-section {
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.spec-title {
  font-size: 30rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.spec-option {
  padding: 12rpx 30rpx;
  background-color: #f5f5f5;
  border-radius: 100rpx;
  font-size: 26rpx;
  color: #333;
}

.spec-option.active {
  background-color: #e0f5eb;
  color: #3db87f;
  border: 1px solid #3db87f;
}

.spec-footer {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f5f5f5;
  background-color: #fff;
}

.spec-quantity {
  display: flex;
  align-items: center;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.quantity-text {
  font-size: 26rpx;
  min-width: 36rpx;
  text-align: center;
}

.spec-confirm {
  background-color: #3db87f;
  color: white;
  padding: 20rpx 60rpx;
  border-radius: 100rpx;
  font-size: 30rpx;
  font-weight: 500;
}
</style> 